
import React from 'react'
import {Card,Row,Col,Button,Icon,Form, Input,Select, Radio,DatePicker,message,Spin } from 'antd';
import moment from 'moment';
import {Link} from 'react-router-dom'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import LeftMenu from 'component/leftmenu/index.jsx';
import HeadImgContent from 'component/headimgcontent/index.jsx';
import LeftMenuItem from 'component/leftmenuitem/index.jsx';


import MMUtile from 'util/mm.jsx'
import User from 'service/user-service.jsx'
const _mm = new MMUtile();
const _user = new User();

import './style.scss'

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;


let residences = [];	
class UserBaseForm extends React.Component{
	constructor(props){
		super(props);
		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			sex:'M',
			birthday:'',
			bloodtype:'',
			idcard:'',
			autograph:'',
			items:[{'name':'修改头像','actived':false,'link':'/update-head-img','icon':'smile-o'},
			{'name':'基本资料','actived':true,'link':'','icon':'solution'},
			{'name':'详细资料','actived':false,'link':'/user-link','icon':'link'},
			{'name':'设置昵称','actived':false,'link':'/user-nick','icon':'tool'},
			{'name':'账号绑定','actived':false,'link':'/binduser','icon':'lock'}],
			loading:true
		}

	}
	componentDidMount(){
		//获取基本资料
		_user.getUserBase().then((res)=>{
			this.setState({
				sex:res.sex?res.sex:'M',
				birthday:res.birthday,
				idcard:res.idcard,
				autograph:res.autograph,
				bloodtype:res.bloodtype,
				loading:false
			})
		},(errMsg)=>{
			
			this.setState({
				loading:false
			})
			_mm.errorTips(errMsg);
		})
	}
	handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, fieldsValue) => {
    	if (err) {
        return;
      }
			
      const values = {
        fieldsValue:fieldsValue,
        'birthday': fieldsValue['birthday']?fieldsValue['birthday'].format('YYYY-MM-DD'):''
      };
			_user.setUserBase({
				birthday:values.birthday,
				sex:values.fieldsValue.sex,
				bloodtype:values.fieldsValue.bloodtype,
				idcard:values.fieldsValue.idcard,
				autograph:values.fieldsValue.autograph
			}).then((res)=>{
				message.success('用户基本信息保存成功');
			},(errMsg)=>{
				_mm.errorTips(errMsg);
			})
      
    });
  }
	render(){
		const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    const formItemLayoutlong = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 19 },
      },
    };
		return(
			
			<div>
				<Row gutter={24}>
					<Col span={7}>
		        <Card bordered={true} className="itemminheight"><LeftMenuItem items={this.state.items}></LeftMenuItem></Card>
		      </Col>
		      <Col span={17}>
						<Spin spinning={this.state.loading}   size="large">
						<Form onSubmit={this.handleSubmit.bind(this)}>
			        <Card title="基本信息" bordered={false}>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="性别"
						        >
						          {getFieldDecorator('sex', {
						            initialValue:this.state.sex,
						          })(
						            <RadioGroup >
						              <Radio value="M">男</Radio>
						              <Radio value="W">女</Radio>
						            </RadioGroup>
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
						          {...formItemLayout}
						          label="生日"
						        >
						          {getFieldDecorator('birthday', {
											  initialValue:moment(this.state.birthday?this.state.birthday:'2018-03-26')
											})(
						            <DatePicker  />
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={12} style={{lineHeight:'40px'}}>
										<FormItem
						          {...formItemLayout}
						          label="血型"
						        >
						          {getFieldDecorator('bloodtype', {
						            initialValue:this.state.bloodtype,
						          })(
						            <Select >
										      <Option value="">请选择</Option>
										      <Option value="A">A型</Option>
										      <Option value="B">B型</Option>
										      <Option value="C">AB型</Option>
										      <Option value="D">O型</Option>
										      <Option value="E">其他</Option>
										    </Select>
						          )}
						        </FormItem>
			        		</Col>
			        		<Col span={12}>
										<FormItem
											{...formItemLayout}
						          label="证件号">
						          {getFieldDecorator('idcard', {
						            initialValue:this.state.idcard,
						          })(
						          <Input placeholder="请输入证件号" />)}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<Row>
			        		<Col span={24} style={{lineHeight:'40px',textAlign:'left'}} >
										<FormItem
						          {...formItemLayoutlong}
						          label="个性签名"
						        >
						          {getFieldDecorator('autograph', {
						            initialValue:this.state.autograph,
						          })(
						            <Input type="textarea" placeholder="请输入您的个性签名" />
						          )}
						        </FormItem>
			        		</Col>
			        	</Row>
			        	<FormItem>
				          <Button
				            type="primary"
				            htmlType="submit"
				          >
				            提交
				          </Button>
				        </FormItem>
			        </Card>
						</Form>
						</Spin>
		      </Col>
				</Row>
			</div>
		)
	}
}
const UserBase = Form.create()(UserBaseForm);
export default UserBase;